{% extends "base.html" %}

{% block title %}全局搜索{% endblock %}

{% block head %}
{{ super() }}
{% endblock %}


{% block content %}
<!-- 页面头 -->
<section class="content-header" xmlns="http://www.w3.org/1999/html">
  <!--头部标题-->
  <h1>
    资产管理
    <!--    <small>全局搜索</small>-->
  </h1>
  <!--面包屑-->
  <ol class="breadcrumb">
    <li><a href="/"><i class="fa fa-home"></i> 主页</a></li>
    <li class="active">资产管理</li>
  </ol>
</section>

<!-- 页面内容 -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">

      <div class="box " id="box">
        <div class="box-header with-border">
          <h3 class="box-title">全局搜索</h3>
        </div>

        <div class="box-body">
          <!--          <p class="margin">小： <code>.input-group.input-group-sm</code></p>-->
          </br></br></br></br></br></br></br>
          <div class="col-md-3"></div>
          <div class="input-group col-md-6 col-xs-12">
            <input type="text" class="form-control" placeholder="请填入IP、访问地址、Bucket名等关键字进行搜索" id="keyword">
            <span class="input-group-btn">
                      <button type="button" class="btn btn-success btn-flat" id="searchBtn"><i class="glyphicon glyphicon-search
"></i> </button>
                    </span>
          </div>
          <div class="col-lg-3"></div>
          </br></br>

          <div class="text-center">
            <p id="searchResult" style="display: none"><strong><span class="text-red" id="k"></span></strong> 搜索结果：</p>
            <ul class="list-unstyled" id="resLi">
            </ul>
          </div>


          </br></br></br></br></br></br></br>

        </div>
        <!-- /.box-body -->
        <!-- Loading (remove the following to stop the loading)-->
        <div id="loading" class="overlay" style="display: none">
          <i class="fa fa-refresh fa-spin"></i>
        </div>
        <!-- end loading -->
      </div>
      <!-- /.box -->

    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</section>
<!-- /.页面内容 -->
{% endblock %}


{% block script %}
<script>
    $(function () {
        $('#box').css('height', $(window).height() - 150)
        $(window).resize(function () {
            $('#box').css('height', $(window).height() - 150)
        })
    })

    // 搜索按钮动作
    $('#searchBtn').click(function () {
        // 删除已有搜索结果
        $('#loading').show()
        // $('#searchResult').hide()

        let keyword = $('#keyword').val()
        console.log(keyword)
        let formData = new FormData()
        formData.append('keyword', keyword)
        $.ajax({
            url: '/api/v1/cmdb/search',
            method: 'POST',
            data: formData,
            contentType: false,
            cache: false,
            processData: false,
            success: function (data) {
                console.log(data)
                $('#resLi').find('li').remove()
                $('#k').text(keyword)
                $('#searchResult').show()
                $('#loading').hide()
                if (data.host) {
                    $('#resLi').append("<li><a href='/cmdb/host?search=" + keyword + "'>主机（" + data.host + "）</a></li>")
                }
                if (data.db) {
                    $('#resLi').append("<li><a href='/cmdb/db?search=" + keyword + "'>数据库（" + data.db + "）</a></li>")
                }
                if (data.lb) {
                    $('#resLi').append("<li><a href='/cmdb/lb?search=" + keyword + "'>负载均衡（" + data.lb + "）</a></li>")
                }
                if (data.os) {
                    $('#resLi').append("<li><a href='/cmdb/os?search=" + keyword + "'>对象存储（" + data.os + "）</a></li>")
                }
                if (data.kv) {
                    $('#resLi').append("<li><a href='/cmdb/kv?search=" + keyword + "'>键值存储（" + data.kv + "）</a></li>")
                }
                if (data.svc) {
                    $('#resLi').append("<li><a href='/cmdb/svc?search=" + keyword + "'>服务（" + data.svc + "）</a></li>")
                }
                if (data.code) {
                    $('#resLi').append("<li><a href='/cmdb/code?search=" + keyword + "'>代码（" + data.code + "）</a></li>")
                }
                if (data.host + data.db + data.lb + data.os + data.kv + data.svc + data.code == 0) {
                    $('#resLi').append("<li>无</li>")
                }
            }
        })
    })
</script>
{% endblock %}